// 点击加一减一增加减少商品数量并更改总价格
let subtract = document.getElementsByClassName('subtract')
let plus = document.getElementsByClassName('plus')
let amountInput = document.getElementsByClassName('amountInput')
let i ;
let price = document.getElementsByClassName('price')
let money = price.innerHTML
function Plus(e){
    e=e || window.event;
    var target=e.target || e.srcElement;
    // console.log(e.target);
    // console.log(e);
    // console.log(target);
    let index = target.getAttribute("name");
    // console.log(amountInput[index].value);
    i = amountInput[index].value;
    money = price[i].innerHTML;
    // plus.onclick = function() {
        if(i<1){
            subtract[index].classList.add('subtractStyle')
            
        }else if( i>2){
            plus[index].classList.add('subtractStyle')
        }else{
            subtract[index].classList.remove('subtractStyle')
            i++
            amountInput[index].value = i
            price[index].innerHTML = money*i
            
        }
    // }
}
function Subtract(e){
    // subtract.onclick = function(){
        e = e || window.event
        var target = e.target || e.srcElement
        let index = target.getAttribute("name")
        i = amountInput[index].value
        money = price[i].innerHTML
        if(i>1&&i<=3){
            i--
            amountInput[index].value = i
            price[index].innerHTML = money *i
        }
        if(i<=1){
            subtract[index].classList.add('subtractStyle')
            plus[index].classList.remove('subtractStyle')
        }else{
            subtract[index].classList.remove('subtractStyle')
            plus[index].classList.remove('subtractStyle')
        }
    // }  
}
// 弹窗(是否删除)
let deleteIcon = document.getElementsByClassName('deleteIcon')[0]
let noDelete = document.getElementsByClassName('noDelete')[0]
let sureDelete = document.getElementsByClassName('sureDelete')[0]
let actionDel = document.getElementsByClassName('actionDel')[0]
let popBox = document.getElementsByClassName('popBox')[0]
// 弹窗
function Pop(e){
    popBox.style.opacity = '1'
    popBox.style.visibility = 'visible'
    document.getElementsByClassName('sureDelete')[0].setAttribute('sign', e)
}
deleteIcon.onclick = function(){
    popBox.style.opacity = '0'
    popBox.style.visibility = 'hidden'
}
noDelete.onclick = function(){
    popBox.style.opacity = '0'
    popBox.style.visibility = 'hidden'
}
// 遍历购物车
function userCarts(){
    let ordersTable = document.querySelector('.ordersTable tbody')
    console.log(ordersTable);
    axios({
        url:'/home/creatOrder/queryCart',
        method:'GET',
        params:{
            pageNo:1,
            pageSize:100,
            userId:userId
        }
    })
    .then(data => {
        console.log(data);
        ordersTable.innerHTML = ``
        let index=0;
        for(let i in data.data.data.data){
            ordersTable.innerHTML += `
            <tr class="goodsItem" flag=${data.data.data.data[i].cartId} goodsId=${data.data.data.data[i].goodsId} shopId=${data.data.data.data[i].shopId}>
            <td class="productItem">
                <div class="product">
                    <div class="checkbox">
                        <input type="checkbox" cartId=${data.data.data.data[i].cartId} class="checkBoxInput">
                        <label for=""></label>
                    </div>
                    <div class="productImg">
                        <img src="${data.data.data.data[i].cover}" alt="">
                        <!-- hover展示大图 -->
                        <div class="hoverImg">
                            <img src="${data.data.data.data[i].cover}" alt="">
                        </div>
                    </div>
                    <div class="productInfo">
                        <h3>
                            <a href="">${data.data.data.data[i].goodsName}</a>
                        </h3>
                        <!-- 动态 -->
                        <p class="productSize">尺码:<span class="productSizeP">${data.data.data.data[i].goodsSpecSize}</span>${data.data.data.data[i].cartId}</p>
                        <p class="productSize">规格:<span class="productColorP">${data.data.data.data[i].goodsSpecColor}</span>${data.data.data.data[i].cartId}</p>
                        
                    </div>
                    <div style="clear: both;"></div>
                </div>
                
            </td>
            <td class="priceItem">
                <div class="myPrice">
                    <span class="yuan">￥</span>
                    <!-- 动态添加 -->
                    <strong class="price">${data.data.data.data[i].goodsPrice}</strong>
                </div>
            </td>
            <td class="quantityItem">
                <!-- 数量组件 -->
                <div class="amount">
                        <button class="subtract subtractStyle" name="${index}" onclick = 'Subtract()'>-</button>
                    <div class="amountNum">
                        <input type="text" value="1" class="amountInput" readonly>
                    </div>
                        <button class="plus" name="${index}" onclick ='Plus()'>+</button>
                </div>
            </td>
            <td class="actionItem">
                <div class="actionDel" onclick = 'Pop(1)'>
                    删除
                </div>
            </td>
        </tr>
            `
            index++;
            // deleteCart(i)
        }
    })
    .catch(err => {
        console.log(err);
    })
}
function fn(){
    if(document.getElementsByClassName('helloUser')[0]){
        userId = document.getElementsByClassName('helloUser')[0].getAttribute('userId')
        console.log(userId);
        userCarts()
        // Pop()
        // changeGoodsAmount()
    }
}
fn()
 //删除一个商品
 sureDelete = document.getElementsByClassName('sureDelete')[0]
 for(let i =0 ; i<document.getElementsByClassName('goodsItem').length; i++){
     document.getElementsByClassName('sureDelete')[0].addEventListener('click', function(){
 if(document.getElementsByClassName('sureDelete')[0].getAttribute('sign') == 1){
         axios({
             url:'/home/creatOrder/deleteCart',
             method:'GET',
             params:{
                 cartId:document.getElementsByClassName('goodsItem')[i].getAttribute('flag')
             }
         })
         .then(data => {
             // console.log(cartId);
             console.log(data);
             popBox.style.opacity = '0'
             popBox.style.visibility = 'hidden'
             explain({
                 code:1,
                 msg:'单个删除成功',
                 time:2000
             })
             // console.log();
             // alert('删除成功')
             userCarts()
         })
         .catch(err => {
             console.log(err);
         })
     }
     })
 }
//批量删除
let operationsBtn = document.getElementsByClassName('operationsBtn')[0]
let checkBoxInput = document.getElementsByClassName('checkBoxInput')
let goodsItem = document.getElementsByClassName('goodsItem')

let j = 0
// for(let i = 0; i<goodsItem.length; i++){
//     checkBoxInput[i].onclick = function(){
//         if(checkBoxInput[i].checked == false){
//             console.log(0);
//             j--
//             document.getElementsByClassName('activeNum')[0].innerHTML = j
//         }else{
//             j++
//             document.getElementsByClassName('activeNum')[0].innerHTML = j
//         }
//     }
    
// }

//一个复选框控制多个复选框
// let j = 0
let checkBoxAll = document.getElementsByClassName('checkBoxAll')[0]
let flagCheck 
checkBoxAll.onclick = function(){
    if(checkBoxAll.checked == true){
        flagCheck == true
        for(let i =0 ; i<goodsItem.length ; i++){
            checkBoxInput[i].checked = true
            document.querySelector('.priceSum span').innerHTML = parseFloat(document.querySelector('.priceSum span').innerHTML)+parseFloat(document.getElementsByClassName('price')[i].innerHTML)

            // for(let i = 0)
            for(let i = 0 ; i<goodsItem.length; i++){
                checkBoxInput[i].onclick = function(){
                    // j++
                    // j++
                    console.log(222222222222222222222);
                    document.getElementsByClassName('activeNum')[0].innerHTML = j
                    if(checkBoxInput[i].checked == false){
                        checkBoxAll.checked = false
                        // (j/2)--
                        j--
                        document.getElementsByClassName('activeNum')[0].innerHTML = j
                        console.log(j);
                        document.querySelector('.priceSum span').innerHTML = parseFloat(document.querySelector('.priceSum span').innerHTML) - parseFloat(document.getElementsByClassName('price')[i].innerHTML)
                    }else{
                        // if()判断如果所有的小框都选择上了再把全选勾上
                        // checkBoxAll.checked = true
                        j++
                        document.getElementsByClassName('activeNum')[0].innerHTML = j
                        console.log(j);
                        console.log(parseInt(document.querySelector('.priceSum span').innerHTML));
                        console.log(parseInt(document.getElementsByClassName('price')[i].innerHTML));
                        document.querySelector('.priceSum span').innerHTML = parseFloat(document.querySelector('.priceSum span').innerHTML)+parseFloat(document.getElementsByClassName('price')[i].innerHTML)
                    }
                    
                }
            }
        }
        document.getElementsByClassName('activeNum')[0].innerHTML = goodsItem.length
    }else{
        flagCheck == false
        for(let i = 0; i<goodsItem.length; i++){
            checkBoxInput[i].checked = false
            document.querySelector('.priceSum span').innerHTML = parseFloat(document.querySelector('.priceSum span').innerHTML) - parseFloat(document.getElementsByClassName('price')[i].innerHTML)
        }
        document.getElementsByClassName('activeNum')[0].innerHTML = 0
    }
}
var arr = []
//批量删除
document.getElementsByClassName('sureDelete')[0].addEventListener('click', function(){
    if(document.getElementsByClassName('sureDelete')[0].getAttribute('sign') == 2){
        //单独选择多个复选框
        for(let i =0 ; i<goodsItem.length ; i++){
            if(checkBoxInput[i].checked == true){
                arr.push(document.getElementsByClassName('checkBoxInput')[i].getAttribute('cartId'))
                // console.log(document.getElementsByClassName('checkBoxInput')[i].getAttribute('cartId'));
            }
        }
        var str = " "
        for(let i in arr){
            str += arr[i]
            if( i == arr.length-1 ){
                break
            } 
            str += ','
        }
        console.log(arr);
        console.log(str);

        axios({
            url:'/home/shoppingCart/cart/deleteSomeCart',
            method:'GET',
            params:{
                cartId:str
            }
        })
        .then(data=>{
            console.log(data);
            // console.log('这是批量删除');
            popBox.style.opacity = '0'
            popBox.style.visibility = 'hidden'
            
            explain({
                code:1,
                msg:'批量删除成功',
                time:2000
            })
            userCarts()
            location.reload()
        })
        .catch( err => {
            console.log(err);
        })
    }
    
})
// }


// operationsBtn.onclick = function(){
//     //单独选择多个复选框
//     for(let i =0 ; i<goodsItem.length ; i++){
//         if(checkBoxInput[i].checked == true){
//             arr.push(document.getElementsByClassName('checkBoxInput')[i].getAttribute('cartId'))
//             // console.log(document.getElementsByClassName('checkBoxInput')[i].getAttribute('cartId'));
//         }
//     }
//     var str = " "
//     for(let i in arr){
//         str += arr[i]
//         if( i == arr.length-1 ){
//             break
//         } 
//         str += ','
//     }
//     console.log(arr);
//     console.log(str);
//     axios({
//         url:'/home/shoppingCart/cart/deleteSomeCart',
//         method:'GET',
//         params:{
//             cartId:str
//         }
//     })
//     .then(data=>{
//         console.log(data);
//         userCarts()
//         alert('删除成功')
        
//     })
//     .catch( err => {
//         console.log(err);
//     })
// }

//结算
let settle = document.querySelector('.finalArea a')
settle.onclick = function(){
    if(document.querySelector('.priceSum span').innerHTML == 0){
        explain({
            code:3,
            msg:'请选择要结算的商品',
            time:2000
        })
    }else{
        for(let i = 0; i<goodsItem.length; i++){
            if(checkBoxInput[i].checked == true){
                let size = document.getElementsByClassName('productSizeP')[i].innerHTML
                let count = document.getElementsByClassName('amountInput')[i].value
                let color = document.getElementsByClassName('productColorP')[i].innerHTML
                let goodsId = document.getElementsByClassName('goodsItem')[i].getAttribute('goodsId')
                let shopId = document.getElementsByClassName('goodsItem')[i].getAttribute('shopId')
                //加上店铺Id,拼接在链接里，跳转至支付页面，同时订单页面多出一个订单
                window.location.href = `/home/productDetail/creatOrder?shopId=${shopId}&goodsId=${goodsId}&size=${size}&count=${count}&color=${color}`
            }
        }
    }
}
